<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/nes.min.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/post.css" />
    <link rel="stylesheet" href="./css/edit.css" />
    <link rel="stylesheet" href="./css/setting.css" />
  </head>
  <body>
    <button type="button" class="point" id="showAside"></button>
    <div class="aside animate nes-container is-centered" id="aside">
      <div class="close" id="closeAside"></div>
      <div class="user">
        <img
          class="nes-avatar is-rounded is-large"
          alt="avator"
          id="userAvator"
          src="../../kiana.png"
          style="image-rendering: pixelated"
        />
        <p class="mt" id="userName">Sakura</p>
        <a><span class="nes-text is-disabled" id="userSite">blogSite</span></a>
      </div>
      <hr />
      <ul class="saku">
        <li>
          <button type="button" data-select="1" class="nes-btn is-primary mybtn_wid mt">
            我的站点
          </button>
        </li>
        <li>
          <button type="button" data-select="2" class="nes-btn is-primary mybtn_wid mt">
            文章列表
          </button>
        </li>
        <li>
          <button type="button" data-select="3" class="nes-btn is-primary mybtn_wid mt">
            新的灵感
          </button>
        </li>
        <li>
          <button type="button" data-select="4" class="nes-btn is-primary mybtn_wid mt">
            设置
          </button>
        </li>
      </ul>
      <div class="submit position">
        <button type="button" id="syncSite" class="nes-btn is-success mybtn_wid">同步站点</button>
        <button type="button" id="openBrowser" class="nes-btn is-warning mybtn_wid">
          浏览器打开
        </button>
      </div>
    </div>

    <div class="right">
      <!-- 站点 -->
      <webview
        id="webview"
        src="https://tonyteachers.gitee.io/"
        class="none"
        data-view="1"
      ></webview>
      <!-- 文章列表 -->
      <div class="post none" data-view="2">
        <ul class="post_list saku"></ul>
      </div>
      <!-- 写文章 -->
      <div class="none new_post" data-view="3">
        <div class="top">
          <h1 contenteditable id="title">新的文章</h1>
          <i>点击修改标题</i>
          <div>
            <button type="button" class="nes-btn is-primary" id="draft">暂存</button>
            <button type="button" class="nes-btn is-success" id="save">保存</button>
          </div>
        </div>
        <div class="tags-list">
          <label for="post_tags">标签:</label>
          <input type="text" id="post_tags" list="tags" />
          <datalist id="tags">
            <option value="随笔"></option>
            <option value="笔记"></option>
            <option value="教程"></option>
            <option value="日记"></option>
          </datalist>
        </div>
        <div id="edit_area" contenteditable="true" spellcheck="false">
          <div></div>
        </div>
      </div>
      <!-- 设置页 -->
      <div class="none setting" data-view="4">
        <ul class="setting_item saku">
          <li>
            <div id="set_name">
              <span>昵称</span>
              <input class="nes-input" type="text" value="Sakura" spellcheck="false" />
            </div>
          </li>
          <li>
            <div class="sak-input" id="set_avator">
              <span>头像</span>
              <input
                type="url"
                class="nes-input"
                value="G:/Working/electron/electron-quick-start/kiana.png"
                spellcheck="false"
              />
              <i>支持文件路径</i>
            </div>
          </li>
          <li>
            <div id="set_site">
              <span>站点</span>
              <input
                class="nes-input"
                type="text"
                value="https://tonyteachers.gitee.io/"
                spellcheck="false"
              />
            </div>
          </li>
          <li>
            <div id="set_gitrepo">
              <span>Git仓库</span>
              <input
                class="nes-input"
                type="text"
                value="https://gitee.com/Tonyteachers/Tonyteachers"
                spellcheck="false"
              />
              <i>站点远程仓库地址</i>
            </div>
          </li>
          <li>
            <div id="set_theme">
              <span>主题</span>
              <div class="nes-select">
                <select required id="theme_list">
                  <option value="" disabled selected hidden>Select...</option>
                </select>
              </div>
            </div>
          </li>
          <li>
            <div id="set_root_path">
              <span>博客路径</span>
              <input class="nes-input" type="text" value="G:/Blog/Blog" spellcheck="false" />
              <i>本地的博客文件夹根目录</i>
            </div>
          </li>
          <li>
            <div id="set_post_path">
              <span>文章路径</span>
              <input
                class="nes-input"
                type="text"
                value="G:/Blog/Blog/source/_posts"
                spellcheck="false"
              />
              <i>文章存放的路径</i>
            </div>
          </li>
          <li>
            <div id="set_editor_path">
              <span>外部编辑器路径</span>
              <input
                class="nes-input"
                type="text"
                value="E:/Typora/Typora.exe"
                spellcheck="false"
              />
              <i>选择使用的外部编辑器路径</i>
            </div>
          </li>
          <li>
            <div id="set_isextra" class="toggle">
              <span>是否外部编辑器打开文章</span>
              <div class="switch">
                <!-- 使用checkbox可以取消选择,radio无法取消选中状态 -->
                <input type="checkbox" class="nes-btn" checked />
                <span class="circle"></span>
              </div>
            </div>
          </li>
          <li>
            <div id="set_isgit" class="toggle">
              <span>是否同步站点后自动打开仓库网页</span>
              <div class="switch">
                <!-- 使用checkbox可以取消选择,radio无法取消选中状态 -->
                <input type="checkbox" class="nes-btn" checked />
                <span class="circle"></span>
              </div>
            </div>
          </li>
          <li>
            <div>
              <button type="button" class="nes-btn is-primary" id="set_save">保存</button>
              <i>下次启动时生效</i>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <script src="./js/index.js"></script>
  </body>
</html>
